<template>
  <div class="limiter">
      <div class="container-login100" style="background-image: url('./assets/images/img-01.jpg');">
          <div class="wrap-login100 p-t-190 p-b-30">
              <van-form 
                class="login100-form validate-form" 
                @submit="onSubmit" 
                label-align="center" 
                scroll-to-error>
                  <div class="login100-form-avatar">
                    <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                  </div>

                  <van-field
                    class="name"
                    v-model="name"
                    type="text"
                    name="手机号"
                    label="手机号"
                    placeholder="填写手机号"
                    :rules="[{ pattern: /^1[3|5|6|9]{1}\d{9}$/, message: '请填写正确的手机号' }]"
                  />

                  <van-field
                    class="password"
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="填写密码"
                    :rules="[{ pattern: /^[\w|\W]{3}/, message: '密码至少三位' }]"
                  />

                  <van-button round block type="primary" native-type="submit" class="btn-sub">
                    注 册
                  </van-button>

                  <router-link to="/business/login" class="a">
                    去登入
                  </router-link>
              </van-form>
          </div>
      </div>

      <!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
  </div>
</template>

<script>
import { showToast, showFailToast } from 'vant';

export default{
  data() {
    return {
      name: '',
      password: '',
      isLoading: false
    }
  },
  methods:{
    async onSubmit(){
      this.isLoading = true;
      const res = await this.$api.Register({ mobile: this.name, password: this.password });
      
      if (res.code == 1) {
        showToast(res.msg);
        this.$router.push('/business/login');
      } else {
        showFailToast({ message: res.msg });
      }
      this.isLoading = false;
    }
  }
}
</script>

